* {
  margin: 0;
  padding: 0;
}
body {
  height: 37.5rem;
  padding: 20px 40px;
  background-image: linear-gradient(100deg, #0fa1df, #e8f30e);
}
.box {
  height: 100%;
  display: flex;
}
.box .left {
  flex: 1;
}
.box .left .user {
  display: flex;
  height: 2rem;
  line-height: 2rem;
}
.box .left .user span {
  font-size: 0.833rem;
  padding: 0 0.208rem;
}
.box .left .user input {
  width: 8.333rem;
  height: 2rem;
  font-size: 0.75rem;
  outline: none;
  border: none;
  border-radius: 0.208rem;
  padding-left: 0.208rem;
}
.box .left .user button {
  height: 2rem;
  width: 3.333rem;
  font-size: 0.75rem;
  background-color: #0e7cb3;
  outline: none;
  border: none;
  border-radius: 0.208rem;
  margin-left: 0.125rem;
}
.box .left .biaoge {
  margin-top: 0.833rem;
}
.box .left .biaoge table {
  width: 35.417rem;
  border: 1px solid #fff;
  border-spacing: 0;
  border-radius: 0.208rem;
}
.box .left .biaoge thead {
  background-image: linear-gradient(100deg, #e8f30e, #0fa1df);
}
.box .left .biaoge tbody {
  background-image: linear-gradient(100deg, #0fa1df, #e8f30e);
}
.box .left .biaoge th,
.box .left .biaoge td {
  height: 2rem;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  text-align: center;
}
.box .left .biaoge th:last-child {
  border-right: 0;
}
.box .left .biaoge tr td:last-child {
  border-right: 0;
}
.box .left .biaoge tr:last-child td {
  border-bottom: 0;
}
.box .right {
  width: 33.333rem;
  height: 100%;
}
.box .right .line {
  height: 50%;
}
.box .right .bar {
  height: 50%;
}
